<script setup lang="ts">
import useLoginStore from '@/store/login/login'

const loginStore = useLoginStore()
const { userInfo } = storeToRefs(loginStore)

const circleUrl =
  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
</script>

<template>
  <div class="user-info">
    <el-dropdown>
      <div class="el-dropdown-link">
        <el-avatar :src="circleUrl" size="small"></el-avatar>
        <span class="username"> {{ userInfo!.name }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="CircleCloseFilled">退出登录</el-dropdown-item>
          <el-dropdown-item icon="UserFilled">用户信息</el-dropdown-item>
          <el-dropdown-item icon="Menu">系统管理</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.user-info {
  .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    span.username {
      padding-left: 4px;
    }
  }
}
</style>
